<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>基于AI Agent的电子书籍馆 — 原型界面</title>
  <style>
    :root {
      --bg: #0f1724;
      --card: #ffffff;
      --muted: #94a3b8;
      --accent: #2563eb;
      --glass: rgba(255, 255, 255, 0.06)
    }

    * {
      box-sizing: border-box;
      font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial
    }

    html,
    body {
      height: 100%;
      margin: 0;
      background: linear-gradient(180deg, #071029 0%, #0b1220 100%);
      color: var(--card)
    }

    .app {
      max-width: 1200px;
      margin: 28px auto;
      padding: 24px
    }

    /* common cards and layout */
    .card {
      background: var(--glass);
      border-radius: 12px;
      padding: 18px;
      color: var(--card);
      backdrop-filter: blur(6px);
      box-shadow: 0 6px 18px rgba(2, 6, 23, 0.6)
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px
    }

    .brand {
      display: flex;
      gap: 12px;
      align-items: center
    }

    .logo {
      width: 48px;
      height: 48px;
      border-radius: 10px;
      background: linear-gradient(135deg, #4f46e5, #06b6d4);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700
    }

    .brand h1 {
      margin: 0;
      font-size: 18px
    }

    .nav {
      display: flex;
      gap: 10px
    }

    .btn {
      background: var(--accent);
      border: none;
      color: #fff;
      padding: 8px 12px;
      border-radius: 8px;
      cursor: pointer
    }

    .ghost {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.06);
      padding: 8px 12px;
      border-radius: 8px;
      color: var(--card)
    }

    /* Login */
    .login-wrap {
      min-height: 76vh;
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: 24px;
      align-items: center
    }

    .login-hero {
      padding: 32px;
      border-radius: 12px
    }

    .login-box {
      max-width: 420px;
      margin: auto
    }

    label {
      display: block;
      margin-top: 12px;
      font-size: 13px;
      color: var(--muted)
    }

    input[type=text],
    input[type=password] {
      width: 100%;
      padding: 12px;
      margin-top: 6px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      background: transparent;
      color: var(--card)
    }

    .sso {
      display: flex;
      gap: 8px;
      margin-top: 12px
    }

    /* Home */
    .grid-3 {
      display: grid;
      grid-template-columns: 1fr 360px;
      gap: 20px
    }

    .search-row {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-bottom: 12px
    }

    .search {
      flex: 1;
      padding: 10px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      background: transparent;
      color: var(--card)
    }

    .book-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px
    }

    .book {
      display: flex;
      gap: 12px;
      padding: 12px;
      border-radius: 10px;
      align-items: center
    }

    .cover {
      width: 58px;
      height: 78px;
      border-radius: 6px;
      background: linear-gradient(180deg, #f97316, #fb7185);
      flex-shrink: 0
    }

    .meta {
      flex: 1
    }

    .meta h3 {
      margin: 0;
      font-size: 15px
    }

    .meta p {
      margin: 6px 0 0 0;
      color: var(--muted);
      font-size: 13px
    }

    /* Reader */
    .reader-wrap {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 18px;
      min-height: 68vh
    }

    .reader {
      background: #041827;
      border-radius: 12px;
      padding: 18px;
      height: 100%;
      display: flex;
      flex-direction: column
    }

    .reader-toolbar {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-bottom: 12px
    }

    .page {
      flex: 1;
      background: white;
      color: #111;
      padding: 18px;
      border-radius: 10px;
      overflow: auto
    }

    .sidebar {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .note {
      background: rgba(255, 255, 255, 0.04);
      padding: 10px;
      border-radius: 8px
    }

    /* AI Q&A */
    .qa-wrap {
      display: grid;
      grid-template-columns: 1fr 360px;
      gap: 16px;
      min-height: 60vh
    }

    .chat {
      display: flex;
      flex-direction: column;
      gap: 12px;
      height: 100%
    }

    .messages {
      flex: 1;
      overflow: auto;
      padding: 12px;
      border-radius: 10px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent)
    }

    .msg {
      max-width: 78%;
      padding: 10px;
      border-radius: 10px;
      margin-bottom: 10px
    }

    .msg.user {
      background: linear-gradient(90deg, #1e293b, #0b1220);
      margin-left: auto
    }

    .msg.ai {
      background: rgba(255, 255, 255, 0.03)
    }

    .chat-input {
      display: flex;
      gap: 8px;
      padding-top: 8px
    }

    textarea {
      flex: 1;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.04);
      background: transparent;
      color: var(--card);
      min-height: 56px
    }

    /* small screens */
    @media (max-width:900px) {
      .login-wrap {
        grid-template-columns: 1fr
      }

      .grid-3 {
        grid-template-columns: 1fr
      }

      .reader-wrap,
      .qa-wrap {
        grid-template-columns: 1fr
      }

      .book-list {
        grid-template-columns: 1fr
      }
    }
  </style>
</head>

<body>
  <div class="app">
    <header>
      <div class="brand">
        <div class="logo">AI</div>
        <div>
          <h1>机构电子书馆</h1>
          <div style="font-size:12px;color:var(--muted)">基于AI Agent 的智能电子资源平台</div>
        </div>
      </div>
      <nav class="nav">
        <button class="ghost" onclick="navigate('home')">首页</button>
        <button class="ghost" onclick="navigate('reader')">阅读器</button>
        <button class="ghost" onclick="navigate('ai')">AI问答</button>
        <button class="btn" onclick="navigate('login')">退出登录</button>
      </nav>
    </header>

    <main id="root">
      <!-- Login Page -->
      <section id="page-login" class="card login-wrap" style="display:none">
        <div class="login-hero card" style="background:linear-gradient(135deg,#071b2a,#072034);">
          <h2>欢迎使用机构电子书馆</h2>
          <p style="color:var(--muted)">支持语义检索、智能推荐与学习分析 — 专为学校/机构定制。</p>
          <ul style="color:var(--muted)">
            <li>教师 / 学生 / 管理员多角色支持</li>
            <li>AI Agent 提供智能问答与摘要</li>
            <li>在线阅读 + 笔记同步</li>
          </ul>
        </div>

        <div class="card login-box">
          <h3>登录到您的账户</h3>
          <label>机构邮箱</label>
          <input id="login-user" type="text" placeholder="user@school.edu" />
          <label>密码</label>
          <input id="login-pass" type="password" placeholder="请输入密码" />
          <div style="display:flex;gap:10px;margin-top:14px">
            <button class="btn" onclick="doLogin()">登录</button>
            <button class="ghost" onclick="ssoLogin()">使用单点登录</button>
          </div>
          <div style="color:var(--muted);font-size:13px;margin-top:10px">提示：可使用测试账号 <strong>student@demo</strong> / 密码
            <strong>demo</strong></div>
        </div>
      </section>

      <!-- Home Page -->
      <section id="page-home" style="display:none">
        <div class="card">
          <div class="search-row">
            <input id="home-search" class="search" placeholder="搜索图书、作者或输入自然语言问题，例如：推荐有关深度学习的入门书籍" />
            <button class="btn" onclick="doHomeSearch()">搜索</button>
            <button class="ghost" onclick="openAIChatFromHome()">AI 问答</button>
          </div>

          <div class="grid-3">
            <div>
              <h3 style="margin:0 0 8px 0">为您推荐</h3>
              <div id="recommend" class="book-list"></div>
            </div>
            <aside>
              <div class="card">
                <h4 style="margin:0">我的书架</h4>
                <p style="color:var(--muted);font-size:13px">快速访问最近打开或已标注的书籍</p>
                <hr style="border:none;height:1px;background:rgba(255,255,255,0.03);margin:10px 0" />
                <div id="shelf"></div>
              </div>

              <div class="card" style="margin-top:12px">
                <h4 style="margin:0">系统提示</h4>
                <p style="color:var(--muted);font-size:13px">AI Agent 可在问答页面提供更细粒度的章节级检索与摘要。</p>
              </div>
            </aside>
          </div>
        </div>
      </section>

      <!-- Reader Page -->
      <section id="page-reader" style="display:none">
        <div class="reader-wrap">
          <div class="reader card">
            <div class="reader-toolbar">
              <button class="ghost" onclick="toggleToc()">目录</button>
              <div style="flex:1;color:var(--muted);font-size:13px">正在阅读：<strong id="reader-title">未选择书籍</strong></div>
              <button class="btn" onclick="saveNote()">保存笔记</button>
            </div>
            <div id="reader-page" class="page">请在首页选择一本书并打开阅读器。示例文本：
              <h2>示例章节：机器学习入门</h2>
              <p>这是模拟的书籍内容区域。支持全文检索、标注、复制与高亮。AI Agent 可以对本页内容进行摘要或回答与本页有关的问题。</p>
              <p>— 章节段落示例 —</p>
            </div>
          </div>

          <aside class="sidebar">
            <div class="card">
              <h4 style="margin:0">目录</h4>
              <ol style="padding-left:16px;color:var(--muted)">
                <li>第1章 概述</li>
                <li>第2章 基础概念</li>
                <li>第3章 算法与实践</li>
                <li>第4章 案例分析</li>
              </ol>
            </div>

            <div class="card">
              <h4 style="margin:0">笔记 & 标注</h4>
              <div id="notes" style="margin-top:8px">
                <div class="note">示例笔记：复习第2章的线性回归。</div>
              </div>
              <textarea id="note-input" placeholder="写下你的笔记或摘录..." style="margin-top:10px"></textarea>
            </div>
          </aside>
        </div>
      </section>

      <!-- AI Q&A Page -->
      <section id="page-ai" style="display:none">
        <div class="qa-wrap">
          <div class="card chat">
            <h3 style="margin:0">AI 智能检索与问答</h3>
            <p style="color:var(--muted);margin:6px 0 0 0">向 AI 提问，它会基于书籍全文与知识图谱在机构资源中检索答案。</p>
            <div id="messages" class="messages"></div>

            <div class="chat-input">
              <textarea id="chat-input" placeholder="输入问题，例如：‘这本书第3章的关键算法是什么？’"></textarea>
              <button class="btn" onclick="sendChat()">发送</button>
            </div>
          </div>

          <aside class="card">
            <h4 style="margin:0">检索设置</h4>
            <label style="font-size:13px;color:var(--muted);margin-top:8px">范围</label>
            <select id="scope"
              style="width:100%;padding:8px;border-radius:8px;background:transparent;color:var(--card);border:1px solid rgba(255,255,255,0.04)">
              <option value="library">整个馆藏</option>
              <option value="current">当前打开书籍</option>
              <option value="mybooks">我的书架</option>
            </select>
            <label style="font-size:13px;color:var(--muted);margin-top:8px">回答粒度</label>
            <select id="granularity"
              style="width:100%;padding:8px;border-radius:8px;background:transparent;color:var(--card);border:1px solid rgba(255,255,255,0.04)">
              <option value="short">简短要点</option>
              <option value="detailed">详细解释</option>
              <option value="citations">带出处与章节</option>
            </select>
            <div style="margin-top:12px"><button class="btn" onclick="clearChat()">清空会话</button></div>
          </aside>
        </div>
      </section>

    </main>
  </div>

  <script>
    // Simple client-side router / state for prototype
    const pages = ['login', 'home', 'reader', 'ai']
    let state = { user: null, openedBook: null }

    function show (id) {
      pages.forEach(p => document.getElementById('page-' + p).style.display = (p === id ? 'block' : 'none'))
    }

    function navigate (page) {
      if (page !== 'login' && !state.user) {
        show('login'); return
      }
      show(page)
      if (page === 'home') renderHome()
      if (page === 'reader') renderReader()
      if (page === 'ai') renderAI()
    }

    // initial: show login
    show('login')

    function doLogin () {
      const u = document.getElementById('login-user').value
      const p = document.getElementById('login-pass').value
      // Mock auth
      if ((u === 'student@demo' && p === 'demo') || u.includes('@')) {
        state.user = { name: u }
        navigate('home')
      } else {
        alert('登录失败：请使用机构邮箱或测试账号 student@demo / 密码 demo')
      }
    }
    function ssoLogin () {
      alert('演示：将触发机构单点登录流程（示意）')
    }

    // Home content
    const sampleBooks = [
      { id: 1, title: '机器学习入门', author: '张三', desc: '适合作为课程教材的概述书' },
      { id: 2, title: '深度学习实践', author: '李四', desc: '案例驱动的深度学习实战' },
      { id: 3, title: '数据结构与算法', author: '王五', desc: '系统讲解常用数据结构' },
      { id: 4, title: '自然语言处理综述', author: '赵六', desc: 'NLP 基础与进展' }
    ]

    function renderHome () {
      const rec = document.getElementById('recommend')
      rec.innerHTML = ''
      sampleBooks.forEach(b => {
        const el = document.createElement('div'); el.className = 'card book'
        el.innerHTML = `<div class="cover"></div><div class="meta"><h3>${b.title}</h3><p>${b.author} · ${b.desc}</p></div><div><button class='btn' onclick='openBook(${b.id})'>打开</button></div>`
        rec.appendChild(el)
      })
      // shelf
      const shelf = document.getElementById('shelf')
      shelf.innerHTML = sampleBooks.slice(0, 2).map(b => `<div style="padding:8px;border-radius:8px;background:rgba(255,255,255,0.02);margin-top:8px">${b.title}<div style='margin-top:8px'><button class='ghost' onclick='openBook(${b.id})'>阅读</button></div></div>`).join('')
    }

    function openBook (id) {
      const book = sampleBooks.find(b => b.id === id)
      if (!book) return
      state.openedBook = book
      document.getElementById('reader-title').textContent = book.title
      document.getElementById('reader-page').innerHTML = `<h2>${book.title}</h2><p>作者：${book.author}</p><p>${book.desc}</p><p>（此处为模拟章节全文内容。实际系统将展示 PDF/EPUB 渲染并支持章节跳转、全文检索与高亮。）</p>`
      navigate('reader')
    }

    function renderReader () {
      // ensure notes exist
      document.getElementById('notes').innerHTML = (document.getElementById('notes').innerHTML || '')
    }

    function saveNote () {
      const t = document.getElementById('note-input').value.trim()
      if (!t) return alert('请填写笔记内容')
      const notes = document.getElementById('notes')
      const n = document.createElement('div'); n.className = 'note'; n.textContent = t
      notes.prepend(n)
      document.getElementById('note-input').value = ''
      alert('已保存笔记（示例）')
    }

    function toggleToc () {
      alert('目录面板已显示于右侧（示例）')
    }

    // AI chat
    function renderAI () {
      const ms = document.getElementById('messages')
      ms.innerHTML = `<div class='msg ai'>您好，我是AI Agent。您可以问关于馆藏书籍或章节的问题。</div>`
    }
    function sendChat () {
      const inp = document.getElementById('chat-input')
      const text = inp.value.trim(); if (!text) return
      appendMessage('user', text)
      inp.value = ''
      // Mock AI response with small delay and pseudo citations
      setTimeout(() => {
        const scope = document.getElementById('scope').value
        const gran = document.getElementById('granularity').value
        let reply = '（示例回答）这是基于馆藏检索得到的摘要：主要观点包括 A、B、C。'
        if (gran === 'detailed') reply = '（详尽回答）该章节首先介绍背景，然后推导核心算法，接着给出实践示例，并讨论复杂度。'
        if (gran === 'citations') reply = '（带出处）见《机器学习入门》第3章，第3.2节。'
        appendMessage('ai', reply)
      }, 700)
    }
    function appendMessage (who, text) {
      const ms = document.getElementById('messages')
      const d = document.createElement('div'); d.className = 'msg ' + who; d.innerHTML = text
      ms.appendChild(d); ms.scrollTop = ms.scrollHeight
    }
    function clearChat () { document.getElementById('messages').innerHTML = ''; renderAI() }

    function doHomeSearch () {
      const q = document.getElementById('home-search').value.trim()
      if (!q) return alert('请输入查询内容')
      // Quick demo: if question-like, forward to AI
      if (q.includes('推荐') || q.includes('找')) {
        navigate('ai')
        setTimeout(() => { document.getElementById('chat-input').value = q; sendChat() }, 200)
      } else {
        alert('检索示例：匹配到 ' + (Math.random() > 0.5 ? '1' : '0') + ' 本书（演示）')
      }
    }

    // Initialize home when user logs in via code path
    // For demo, auto-fill demo account
    document.getElementById('login-user').value = 'student@demo'
    document.getElementById('login-pass').value = 'demo'

  </script>
</body>

</html>